<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <link type="image/svg" rel="icon" href="/press/favicon.svg"><meta name="keywords" content="前端,游戏,Vue,React,Node,前端项目规范化工具配置,Koa"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="robots" content="index,follow"><meta name="og:title" content="liu0716 的个人博客"><meta name="url" content="https://liu0716.gitee.io/press/"><meta name="og:url" content="https://lliu0716.github.io/press/"><title>前端项目规范化工具配置 | liu0716 的个人博客</title><meta name="description" content="项目规范化工具配置, 包括 typescript, eslint, prettier, husky, lint-staged, commitlint">
    <link rel="preload" href="/press/assets/style-bd81e949.css" as="style"><link rel="stylesheet" href="/press/assets/style-bd81e949.css">
    <link rel="modulepreload" href="/press/assets/app-133d66d8.js"><link rel="modulepreload" href="/press/assets/framework-c611892d.js"><link rel="modulepreload" href="/press/assets/index.html-e42d9afb.js"><link rel="modulepreload" href="/press/assets/index.html-2371ace2.js"><link rel="prefetch" href="/press/assets/index.html-1e68895e.js" as="script"><link rel="prefetch" href="/press/assets/index.html-cc64bccf.js" as="script"><link rel="prefetch" href="/press/assets/index.html-67a7af56.js" as="script"><link rel="prefetch" href="/press/assets/index.html-f93977f1.js" as="script"><link rel="prefetch" href="/press/assets/index.html-2a3cf2bb.js" as="script"><link rel="prefetch" href="/press/assets/index.html-5d2b61a8.js" as="script"><link rel="prefetch" href="/press/assets/index.html-df432437.js" as="script"><link rel="prefetch" href="/press/assets/index.html-f69a28a5.js" as="script"><link rel="prefetch" href="/press/assets/index.html-7c9b6bf6.js" as="script"><link rel="prefetch" href="/press/assets/index.html-ce8b73c9.js" as="script"><link rel="prefetch" href="/press/assets/index.html-7f7e32ba.js" as="script"><link rel="prefetch" href="/press/assets/index.html-16a0b569.js" as="script"><link rel="prefetch" href="/press/assets/index.html-978381eb.js" as="script"><link rel="prefetch" href="/press/assets/404.html-d1da943c.js" as="script"><link rel="prefetch" href="/press/assets/index.html-0c8973e5.js" as="script"><link rel="prefetch" href="/press/assets/index.html-43b21038.js" as="script"><link rel="prefetch" href="/press/assets/index.html-9ea21412.js" as="script"><link rel="prefetch" href="/press/assets/index.html-3bb6630f.js" as="script"><link rel="prefetch" href="/press/assets/index.html-8072adc9.js" as="script"><link rel="prefetch" href="/press/assets/index.html-7d6def65.js" as="script"><link rel="prefetch" href="/press/assets/index.html-2a9fae25.js" as="script"><link rel="prefetch" href="/press/assets/index.html-f431e102.js" as="script"><link rel="prefetch" href="/press/assets/index.html-ed5ef29f.js" as="script"><link rel="prefetch" href="/press/assets/index.html-f90bbd7e.js" as="script"><link rel="prefetch" href="/press/assets/index.html-f1b6c22e.js" as="script"><link rel="prefetch" href="/press/assets/index.html-67a8fefc.js" as="script"><link rel="prefetch" href="/press/assets/index.html-325348ac.js" as="script"><link rel="prefetch" href="/press/assets/404.html-de48043d.js" as="script"><link rel="prefetch" href="/press/assets/Alert-2c06a393.js" as="script"><link rel="prefetch" href="/press/assets/GluttonousSnake-32b623a0.js" as="script"><link rel="prefetch" href="/press/assets/GluttonousSnakeCanvas-a9be0618.js" as="script"><link rel="prefetch" href="/press/assets/Home-fa7ef25b.js" as="script"><link rel="prefetch" href="/press/assets/LinkList-5f3f0819.js" as="script"><link rel="prefetch" href="/press/assets/MineClearance-13791cfc.js" as="script"><link rel="prefetch" href="/press/assets/OtherComponent-bc557433.js" as="script"><link rel="prefetch" href="/press/assets/Control-9b65d1b7.js" as="script"><link rel="prefetch" href="/press/assets/Snake-b2035f7a.js" as="script"><link rel="prefetch" href="/press/assets/Mine-17f87f2b.js" as="script"><link rel="prefetch" href="/press/assets/setupDevtools-X4YFRK4B-d6697a55.js" as="script">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/press/" class=""><img class="logo" src="/press/./favicon.svg" alt="liu0716 的个人博客"><span class="site-name can-hide">liu0716 的个人博客</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/press/" class="" aria-label="主页"><!--[--><!--]--> 主页 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/press/web" class="router-link-active" aria-label="web分享"><!--[--><!--]--> web分享 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/press/node" class="" aria-label="node分享"><!--[--><!--]--> node分享 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/press/love" class="" aria-label="前端与恋爱"><!--[--><!--]--> 前端与恋爱 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/press/game" class="" aria-label="游戏分享"><!--[--><!--]--> 游戏分享 <!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/press/" class="" aria-label="主页"><!--[--><!--]--> 主页 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/press/web" class="router-link-active" aria-label="web分享"><!--[--><!--]--> web分享 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/press/node" class="" aria-label="node分享"><!--[--><!--]--> node分享 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/press/love" class="" aria-label="前端与恋爱"><!--[--><!--]--> 前端与恋爱 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/press/game" class="" aria-label="游戏分享"><!--[--><!--]--> 游戏分享 <!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/press/" class="sidebar-item sidebar-heading" aria-label="主页"><!--[--><!--]--> 主页 <!--[--><!--]--></a><!----></li><li><a href="/press/web" class="router-link-active sidebar-item sidebar-heading" aria-label="web分享"><!--[--><!--]--> web分享 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/press/web/tool" class="router-link-active router-link-exact-active router-link-active sidebar-item" aria-label="开发规范化工具配置"><!--[--><!--]--> 开发规范化工具配置 <!--[--><!--]--></a><!----></li><li><a href="/press/web/vue" class="sidebar-item" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a><!----></li><li><a href="/press/web/react" class="sidebar-item" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/press/node" class="sidebar-item sidebar-heading" aria-label="node分享"><!--[--><!--]--> node分享 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a href="/press/node" class="sidebar-item" aria-label="node"><!--[--><!--]--> node <!--[--><!--]--></a><!----></li><li><a href="/press/node/koa" class="sidebar-item" aria-label="Koa"><!--[--><!--]--> Koa <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/press/love" class="sidebar-item sidebar-heading" aria-label="前端与恋爱"><!--[--><!--]--> 前端与恋爱 <!--[--><!--]--></a><!----></li><li><a href="/press/game" class="sidebar-item sidebar-heading" aria-label="游戏分享"><!--[--><!--]--> 游戏分享 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="前端项目规范化工具配置" tabindex="-1"><a class="header-anchor" href="#前端项目规范化工具配置" aria-hidden="true">#</a> 前端项目规范化工具配置</h1><blockquote><p>代码规范统一对于多人开发的项目好处非常多</p><p>哪怕是自己一个人开发, 也能在很久后重新打开代码时的格式还是当年的样子</p><p>规范化工具非常多, 也有个很现实的问题, 版本, 随着时间的推移, 会出现多个不同的版本</p><p>有些配置没变, 有些却变的不一样了</p><p>当前是 2022/08/19 13:46, 记录自己的配置过程</p></blockquote><h2 id="用到的工具" tabindex="-1"><a class="header-anchor" href="#用到的工具" aria-hidden="true">#</a> 用到的工具</h2><ul><li><code>typescript</code></li><li><code>eslint</code></li><li><code>prettier</code></li><li><code>husky</code></li><li><code>lint-staged</code></li><li><code>commitlint</code></li><li><code>committzen</code></li></ul><h2 id="生成package-json文件" tabindex="-1"><a class="header-anchor" href="#生成package-json文件" aria-hidden="true">#</a> 生成<code>package.json</code>文件</h2><blockquote><p>直接写, 或者使用命令直接生成, 这里使用命令生成一个默认配置</p></blockquote><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> init <span class="token parameter variable">-y</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>这里添加 <code>&quot;type&quot;: &quot;module&quot;</code> 到<code>package.json</code>里面, 使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules" target="_blank" rel="noopener noreferrer">es 模块<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>开发</p><h2 id="typescript" tabindex="-1"><a class="header-anchor" href="#typescript" aria-hidden="true">#</a> <code>typescript</code></h2><blockquote><p><code>ts</code> 作为 <code>js</code> 的超集, 在代码规范上起到了很好的补充作用</p></blockquote><h4 id="安装-ts" tabindex="-1"><a class="header-anchor" href="#安装-ts" aria-hidden="true">#</a> 安装<code> ts</code></h4><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-D</span> typescript
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="生成tsconfig-json" tabindex="-1"><a class="header-anchor" href="#生成tsconfig-json" aria-hidden="true">#</a> 生成<code>tsconfig.json</code></h4><blockquote><p>可以直接使用第 3 步的代码</p></blockquote><ol><li>到<code>package.json</code>添加命令</li></ol><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;tsc&quot;</span><span class="token operator">:</span> <span class="token string">&quot;tsc init&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="2"><li>使用命令</li></ol><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> run tsc
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ol start="3"><li>修改<code>tsconfig.json</code></li></ol><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;compilerOptions&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;baseUrl&quot;</span><span class="token operator">:</span> <span class="token string">&quot;.&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;rootDir&quot;</span><span class="token operator">:</span> <span class="token string">&quot;src&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;target&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ESNext&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;module&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ESNext&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;lib&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;ESNext&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;DOM&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;WebWorker&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token property">&quot;outDir&quot;</span><span class="token operator">:</span> <span class="token string">&quot;dist&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;sourceMap&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token property">&quot;declaration&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token property">&quot;declarationDir&quot;</span><span class="token operator">:</span> <span class="token string">&quot;dist/types&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;strict&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token property">&quot;esModuleInterop&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token property">&quot;skipLibCheck&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token property">&quot;forceConsistentCasingInFileNames&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token property">&quot;moduleResolution&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Node&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;include&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;src/**/*&quot;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>具体配置可以查看官网配置 <a href="https://www.tslang.cn/docs/handbook/tsconfig-json.html" target="_blank" rel="noopener noreferrer">tsconfig.json 项目配置<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></blockquote><p>这时可以创建一个<code> ts</code> 文件到<code>src</code>文件夹下 , 试试 <code>typescript </code>是否生效</p><p><code>src/index.ts</code></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">const</span> main <span class="token operator">=</span> <span class="token punctuation">(</span>a<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">-</span> b
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>添加命令</li></ul><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;tsc --watch&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><p>查看 <code>dist</code> 文件夹</p></li><li><p>得到一个 <code>index.js</code> 文件</p></li><li><p>得到一个 <code>index.js.map</code> 文件</p></li><li><p>得到一个 <code>types/index.d.ts</code> 文件</p></li></ul><h2 id="eslint" tabindex="-1"><a class="header-anchor" href="#eslint" aria-hidden="true">#</a> <code>eslint</code></h2><blockquote><p>就不再多介绍这个工具的作用了, 会有非常多关于它作用的介绍</p></blockquote><h3 id="痛点" tabindex="-1"><a class="header-anchor" href="#痛点" aria-hidden="true">#</a> 痛点</h3><ul><li>会和 <code>prettier</code> 冲突</li></ul><h3 id="用到的包" tabindex="-1"><a class="header-anchor" href="#用到的包" aria-hidden="true">#</a> 用到的包</h3><blockquote><p>这里是指一般的项目中会用到的包</p></blockquote><table><thead><tr><th style="text-align:center;">包名</th><th style="text-align:center;">当前使用版本</th></tr></thead><tbody><tr><td style="text-align:center;"><code>eslint</code></td><td style="text-align:center;">8.22.0</td></tr><tr><td style="text-align:center;"><code>eslint-config-standard-with-typescript</code></td><td style="text-align:center;">22.0.0</td></tr><tr><td style="text-align:center;"><code>eslint-plugin-import</code></td><td style="text-align:center;">2.26.0</td></tr><tr><td style="text-align:center;"><code>eslint-plugin-n</code></td><td style="text-align:center;">15.2.4</td></tr><tr><td style="text-align:center;"><code>eslint-plugin-promise</code></td><td style="text-align:center;">6.0.0</td></tr></tbody></table><h3 id="配置方法" tabindex="-1"><a class="header-anchor" href="#配置方法" aria-hidden="true">#</a> 配置方法</h3><blockquote><p>可以直接使用第 2 步的代码</p></blockquote><ol><li>安装<code>eslint</code>后通过<code>eslint</code>内置命令生成一份配置文件, 或者直接写一个<code>eslint</code>认识的文件, 具体格式请百度 这里选择了<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules" target="_blank" rel="noopener noreferrer">es 模块<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>, 所以使用<code>.cjs</code>文件</li></ol><blockquote><p>差异请百度: <code>es</code> 和 <code>commonjs</code> 的差异</p></blockquote><ul><li><p>使用命令</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i eslint <span class="token parameter variable">-D</span>
npx eslint <span class="token parameter variable">--init</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>根据提示一步步选择</p></li></ul><ol start="2"><li>修改自动生成/自己创建的<code>.eslintrc.cjs</code>文件</li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token string">&#39;@typescript-eslint/parser&#39;</span><span class="token punctuation">,</span>
  <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;standard&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;eslint-config-standard-with-typescript&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">ecmaVersion</span><span class="token operator">:</span> <span class="token string">&#39;latest&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">&#39;module&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">project</span><span class="token operator">:</span> <span class="token string">&#39;./tsconfig.json&#39;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;@typescript-eslint&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>这时可以试试 <code>eslint</code> 是否生效</li></ol><ul><li>添加命令</li></ul><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;lint&quot;</span><span class="token operator">:</span> <span class="token string">&quot;eslint src --ext .js,.ts --cache --fix&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>运行命令</li></ul><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> run lint
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote><p>得到 <code>eslint</code> 报错 <code>&#39;main&#39; is assigned a value but never used </code></p></blockquote><h2 id="prettier" tabindex="-1"><a class="header-anchor" href="#prettier" aria-hidden="true">#</a> <code>prettier</code></h2><table><thead><tr><th style="text-align:center;">包名</th><th style="text-align:center;">当前使用版本</th></tr></thead><tbody><tr><td style="text-align:center;"><code>prettier</code></td><td style="text-align:center;">8.22.0</td></tr><tr><td style="text-align:center;"><code>eslint-config-prettier</code></td><td style="text-align:center;">8.5.0</td></tr><tr><td style="text-align:center;"><code>eslint-plugin-prettier</code></td><td style="text-align:center;">4.2.1</td></tr></tbody></table><blockquote><p>代码格式化工具</p><p>能快速保存并格式化代码, 作用和<code>eslint</code>有部分重叠</p></blockquote><ol><li>安装包</li></ol><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-D</span> prettier eslint-config-prettier eslint-plugin-prettier
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ol start="2"><li>添加配置文件<code>.prettierrc.json</code></li></ol><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;semi&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token property">&quot;singleQuote&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token property">&quot;trailingComma&quot;</span><span class="token operator">:</span> <span class="token string">&quot;none&quot;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>修改 <code>.eslintrc.cjs</code>文件</li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token string">&#39;@typescript-eslint/parser&#39;</span><span class="token punctuation">,</span>
<span class="token operator">-</span> <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;standard&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;eslint-config-standard-with-typescript&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token operator">+</span> <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;standard&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;eslint-config-standard-with-typescript&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;prettier&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">ecmaVersion</span><span class="token operator">:</span> <span class="token string">&#39;latest&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">&#39;module&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">project</span><span class="token operator">:</span> <span class="token string">&#39;./tsconfig.json&#39;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">-</span> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;@typescript-eslint&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token operator">+</span> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;@typescript-eslint&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;prettier&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token operator">-</span> rules<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">+</span> rules<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">&#39;prettier/prettier&#39;</span><span class="token operator">:</span> <span class="token number">2</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="4"><li>代码中默认格式化工具选择 <code>prettier</code> 并格式化代码</li></ol><h2 id="husky" tabindex="-1"><a class="header-anchor" href="#husky" aria-hidden="true">#</a> <code>husky</code></h2><table><thead><tr><th style="text-align:center;">包名</th><th style="text-align:center;">当前使用版本</th></tr></thead><tbody><tr><td style="text-align:center;"><code>husky</code></td><td style="text-align:center;">8.0.1</td></tr><tr><td style="text-align:center;"><code>lint-staged</code></td><td style="text-align:center;">13.0.3</td></tr></tbody></table><p>安装包</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i husky lint-staged <span class="token parameter variable">-D</span>
npx husky <span class="token function">install</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><p>自动得到一个 <code>.husky</code> 文件</p></li><li><p>在 <code>.husky</code> 文件夹下创建 <code>pre-commit</code> 和 <code>commit-msg</code> 钩子文件</p></li></ul><p><code>.husky/commit-msg</code></p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>npx <span class="token parameter variable">--no</span> -- commitlint <span class="token parameter variable">--edit</span> <span class="token variable">$1</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><code>.husky/pre-commit</code></p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>npx <span class="token parameter variable">--no</span> -- lint-staged
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ul><li>在<code>package.json</code>添加配置文件</li></ul><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;lint-staged&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;*.{js,ts}&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;prettier --write&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;eslint --fix&quot;</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>这样提交就会自动格式化代码, 还可以加入其他命令, 例如知道测试命令</p><p><code>lint-staged</code>只对修改的文件起作用</p></blockquote><h2 id="commitlint-and-commitizen" tabindex="-1"><a class="header-anchor" href="#commitlint-and-commitizen" aria-hidden="true">#</a> <code>commitlint</code> and <code>commitizen</code></h2><blockquote><p>统一代码提交格式</p></blockquote><table><thead><tr><th style="text-align:center;">包名</th><th style="text-align:center;">当前使用版本</th></tr></thead><tbody><tr><td style="text-align:center;"><code>@commitlint/cli</code></td><td style="text-align:center;">17.0.3</td></tr><tr><td style="text-align:center;"><code>@commitlint/config-conventional</code></td><td style="text-align:center;">17.0.3</td></tr><tr><td style="text-align:center;"><code>commitizen</code></td><td style="text-align:center;">4.2.5</td></tr></tbody></table><p>安装包</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-D</span> @commitlint/cli @commitlint/config-conventional commitizen
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="这里会有-2-套配置-推荐使用-angular-团队规范的-preset" tabindex="-1"><a class="header-anchor" href="#这里会有-2-套配置-推荐使用-angular-团队规范的-preset" aria-hidden="true">#</a> 这里会有 2 套配置 , 推荐使用 <code>Angular</code> 团队规范的 preset</h3><ul><li>添加配置文件 <code>commitlint.config.cjs</code> 到根文件夹</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;@commitlint/config-conventional&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;cz&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">&#39;subject-case&#39;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">&#39;never&#39;</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="angular-团队规范的-preset-配置方法" tabindex="-1"><a class="header-anchor" href="#angular-团队规范的-preset-配置方法" aria-hidden="true">#</a> <code>Angular</code> 团队规范的 preset 配置方法</h4><table><thead><tr><th style="text-align:center;">包名</th><th style="text-align:center;">当前使用版本</th></tr></thead><tbody><tr><td style="text-align:center;"><code>cz-conventional-changelog</code></td><td style="text-align:center;">3.3.0</td></tr></tbody></table><blockquote><p>纯英文, 对英语不好的同学不太友好</p></blockquote><ol><li>安装包</li></ol><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-D</span> cz-conventional-changelog
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ol start="2"><li>添加配置到<code>package.json</code>文件</li></ol><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;lint&quot;</span><span class="token operator">:</span> <span class="token string">&quot;eslint src --ext .js,.ts --cache --fix&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;commit&quot;</span><span class="token operator">:</span> <span class="token string">&quot;git cz&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;config&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;commitizen&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;node_modules/cz-conventional-changelog&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>使用命令并填写相对应的参数, 如同邮件般填写 <code>commit</code></li></ol><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> run commit
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="自定义-preset-配置方法" tabindex="-1"><a class="header-anchor" href="#自定义-preset-配置方法" aria-hidden="true">#</a> 自定义 preset 配置方法</h4><blockquote><p>这里使用 <a href="https://cz-git.qbb.sh/zh/guide/introduction.html" target="_blank" rel="noopener noreferrer"><code>cz-git</code><span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></blockquote><table><thead><tr><th style="text-align:center;">包名</th><th style="text-align:center;">当前使用版本</th></tr></thead><tbody><tr><td style="text-align:center;"><code>cz-git</code></td><td style="text-align:center;">1.3.10</td></tr><tr><td style="text-align:center;"><code>cz-cli</code></td><td style="text-align:center;">1.3.10</td></tr><tr><td style="text-align:center;"><code>conventional-changelog-lint-config-cz</code></td><td style="text-align:center;">0.3.0</td></tr><tr><td style="text-align:center;"><code>commitlint-config-cz</code></td><td style="text-align:center;">0.13.3</td></tr></tbody></table><ol><li>安装包</li></ol><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-D</span> cz-git cz-cli conventional-changelog-lint-config-cz commitlint-config-cz
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ol start="2"><li>添加配置文件 <code>cz.config.cjs</code> 到根文件夹</li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token string">&#39;use strict&#39;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">types</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;feat&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;feat:     新增功能 | A new feature&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;fix&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;fix:      修复缺陷 | A bug fix&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;docs&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;docs:     文档更新 | Documentation only changes&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;style&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;style:    代码格式 | Changes that do not affect the meaning of the code&#39;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;refactor&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;refactor: 代码重构 | A code change that neither fixes a bug nor adds a feature&#39;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;perf&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;perf:     性能提升 | A code change that improves performance&#39;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;test&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;test:     测试相关 | Adding missing tests or correcting existing tests&#39;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;ci&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;ci:       持续集成 | Changes to our CI configuration files and scripts&#39;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;revert&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;revert:   回退代码 | Revert to a commit&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;chore&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;chore:    其他修改 | Other changes that do not modify src or test files&#39;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>

  <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;选择你要提交的类型 :&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">scope</span><span class="token operator">:</span> <span class="token string">&#39;选择一个提交范围（可选）:&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">customScope</span><span class="token operator">:</span> <span class="token string">&#39;请输入自定义的提交范围 :&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">subject</span><span class="token operator">:</span> <span class="token string">&#39;填写简短精炼的变更描述 :\n&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token string">&#39;填写更加详细的变更描述（可选）。使用 &quot;|&quot; 换行 :\n&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">breaking</span><span class="token operator">:</span> <span class="token string">&#39;列举非兼容性重大的变更（可选）。使用 &quot;|&quot; 换行 :\n&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token string">&#39;列举关联issue (可选) 例如: #31, #I3244 :\n&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">confirmCommit</span><span class="token operator">:</span> <span class="token string">&#39;是否提交或修改commit ? (Y/N)&#39;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token literal-property property">allowCustomScopes</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token literal-property property">allowCustomIssuePrefixs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token literal-property property">allowEmptyIssuePrefixs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token literal-property property">subjectLimit</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
  <span class="token literal-property property">emptyScopesAlias</span><span class="token operator">:</span> <span class="token string">&#39;跳过&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">defaultBody</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">defaultScope</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">defaultSubject</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">customScopesAlias</span><span class="token operator">:</span> <span class="token string">&#39;以上都不是？我要自定义&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">allowBreakingChanges</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;feat&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;fix&#39;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>更多配置选项请查看<a href="https://cz-git.qbb.sh/zh/config/" target="_blank" rel="noopener noreferrer">相关配置<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></blockquote><ol start="3"><li>添加配置到<code>package.json</code>文件</li></ol><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;lint&quot;</span><span class="token operator">:</span> <span class="token string">&quot;eslint src --ext .js,.ts --cache --fix&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;commit&quot;</span><span class="token operator">:</span> <span class="token string">&quot;git cz&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;config&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;commitizen&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;node_modules/cz-git&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;czConfig&quot;</span><span class="token operator">:</span> <span class="token string">&quot;cz.config.cjs&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="4"><li>使用命令并填写相对应的参数, 如同邮件般填写 <code>commit</code></li></ol><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> run commit
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">最近更新时间: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 450441058@qq.com">liu</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/press/assets/app-133d66d8.js" defer></script>
  </body>
</html>
